<template>
  <div>
    <header>
      <p class="seach">
        <img @click="search" src="../../assets/seach.png" alt="" />
      </p>
      <p class="region" @click="Return">
        {{ region }}
      </p>
      <p v-if="dl!='成功'">登录|注册</p>
      <p v-else>登录成功</p>
    </header>
    <main>
      <div class="about">
        <div class="swiper-container">
          <div class="swiper-wrapper">
            <div class="swiper-slide">
              <ul>
                <li
                  @click="takeOut(value, index)"
                  v-for="(value, index) in arr"
                  :key="index"
                >
                  <img :src="src + value.image_url" alt="" />
                  <span>
                    {{ value.title }}
                  </span>
                </li>
              </ul>
            </div>
            <div class="swiper-slide">
              <ul>
                <li v-for="(value, index) in arr1" :key="index">
                  <img :src="src + value.image_url" alt="" />
                  <span>
                    {{ value.title }}
                  </span>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
      <p class="sj">附近商家</p>
      <shop :arrNew="arrNew" :srcc="srcc"> </shop>
    </main>
    <divfooter></divfooter>
  </div>
</template>
<script>
import Swiper from "swiper";
import shop from "./shop.vue";
import divfooter from "../elm-footer/elm-footer.vue";
// import filter from "../../utils/filter"
import { pageNumber } from "../../api/index.js";
export default {
  // filters:{
  //   filter
  // },
  components: {
    shop,
    divfooter,
  },
  data() {
    return {
      arr: [],
      arr1: [],
      src: "https://fuss10.elemecdn.com/",
      srcc: "https://elm.cangdu.org/img/",
      region: "",
      arrNew: [],
      pageNumber: 0,
      Number: 10,
      latitude: "",
      longitude: "",
      dl: "",
    };
  },
  methods: {
    takeOut(value, index) {
      this.$router.push({
        path: "/elmshopcar",
        query: {
          arrNew: this.arrNew,
          latitude: this.latitude,
          longitude: this.longitude,
          pageNumber: this.pageNumber,
          Number: this.Number,
          region: this.region,
          title: value.title,
        },
      });
      console.log(this.longitude, this.latitude);
    },
    search() {
      this.$router.push("/elmsearch");
    },
    Return(){
      this.$router.push("/elms");
    }
  },
  mounted() {
    if (localStorage.dl) {
      this.dl = localStorage.dl;
    }
    this.latitude = this.$route.query.latitude;
    this.longitude = this.$route.query.longitude;
    this.axios(
      "http://elm.cangdu.org/v2/index_entry?geohash=31.239585,121.323628&group_type=1&flags[]=F"
    ).then((quan) => {
      for (var i = 0; i < 8; i++) {
        this.arr.push(quan.data[i]);
        this.arr1.push(quan.data[8 + i]);
      }
    });
    this.axios(
      "http://elm.cangdu.org/shopping/restaurants?latitude=31.239585&longitude=121.323628&offset=0&limit=20&extras[]=activities&keyword=&restaurant_category_id=&restaurant_category_ids[]=&order_by=&delivery_mode[]="
    ).then((es) => {
      this.arrNew = es.data;
      console.log(this.arrNew);
    });
    new Swiper(".swiper-container", {
      loop: true,
      pagination: ".swiper-pagination",
    });
    localStorage.region = this.$route.query.region;
    if (localStorage.region) {
      this.region = localStorage.region;
    }

    window.addEventListener("scroll", async () => {
      9;
      if (
        document.documentElement.scrollTop + window.innerHeight ==
        document.body.offsetHeight + 42
      ) {
        this.pageNumber += 10;
        var region4 = await pageNumber(
          this.latitude,
          this.longitude,
          this.pageNumber,
          this.Number
        );
        if (region4.data) {
          this.arrNew = this.arrNew.concat(region4.data);
        }
      }
    });
  },
};
</script>
<style scoped>
.sj {
  font-size: 0.3rem;
  height: 1.4rem;
  line-height: 1.4rem;
  padding-left: 0.3rem;
}
.seach {
  width: 0.8rem;
  height: 0.8rem;
}
.seach img {
  width: 100%;
  height: 100%;
}
.region {
  width: 3rem;
  height: 0.4rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
header {
  position: fixed;
  z-index: 1990;
  top: 0;
  left: 0;
  padding-left: 0.2rem;
  padding-right: 0.2rem;
  font-size: 0.3rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #3190e8;
  width: 100%;
  height: 1rem;
  color: #fff;
  box-sizing: border-box;
}
main {
  margin-top: 1rem;
}
* {
  margin: 0;
  padding: 0;
}
li {
  list-style: none;
}
.swiper-slide ul {
  width: 100%;
  overflow: hidden;
}
.swiper-slide ul li {
  float: left;
  width: 25%;
  text-align: center;
  height: 1.6rem;
  font-size: 0.3rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding-top: 0.2rem;
  box-sizing: border-box;
}
.swiper-slide ul li img {
  width: 0.8rem;
  height: 0.8rem;
  display: block;
}
</style>